﻿<h1>弹出层 Layer</h1>
<div class="section">
    <h2>选项</h2>
    <pre class="code">
option = {
    width: 数值，默认500px,
    height: 数值，默认300px,
    title: 字符,
    icon: 字符,
    url: Url,
    partial: 布尔，url是否是部件,
    content: Html字符,
    footer: Html字符,
    buttons: [
        { text: 按钮名称, handler: 按钮方法 }
    ],
    success: function () { //弹出后回调方法 }
}
</pre>
</div>
<div class="section">
    <h2>方法</h2>
    <table class="docTable">
        <tr>
            <th style="width:100px;">名称</th>
            <th style="width:150px;">参数</th>
            <th style="width:100px;">返回值</th>
            <th>描述</th>
            <th>示例</th>
        </tr>
        <tr>
            <td>page</td>
            <td>option：选项对象，参见下文。</td>
            <td>对话框对象，参见下文。</td>
            <td>加载page页面。</td>
            <td>
                Layer.page(option);
                <span class="link" onclick="Layer.page({ url: 'http://www.baidu.com' });">测试页面</span>
                <span class="link" onclick="Layer.page({ url: baseUrl + '/static/docs/ui/layer.html', partial: true });">测试部件</span>
            </td>
        </tr>
        <tr>
            <td>open</td>
            <td>option：选项对象，参见下文。</td>
            <td>对话框对象，参见下文。</td>
            <td>弹出模态对话框。</td>
            <td>
                Layer.open(option);
                <span class="link" onclick="Layer.open({content:'<h1>Hello World!</h1>'});">无标题</span>
                <span class="link" onclick="Layer.open({title:'标题',content:'<h1>Hello World!</h1>'});">测试内容</span>
                <span class="link" onclick="Layer.open({title:'标题',url:'http://www.baidu.com'});">测试页面</span>
                <span class="link" onclick="Layer.open({title:'标题',url:baseUrl + '/static/docs/ui/layer.html', partial: true});">测试部件</span>
            </td>
        </tr>
        <tr>
            <td>loading</td>
            <td>message：加载信息。</td>
            <td>对话框对象对象，参见下文。</td>
            <td>弹出加载中。</td>
            <td>
                Layer.loading(message);
                <span class="link" onclick="showLoading()">测试</span>
                <script>
                    function showLoading() {
                        var ld = Layer.loading('加载中......');
                        setTimeout(function () { ld.close(); }, 3000);
                    }
                </script>
                <pre>
var dlg = Layer.loading('提交中......');
$.post(url, data, function(res) {
    dlg.close();
});
</pre>
            </td>
        </tr>
        <tr>
            <td>tips</td>
            <td>message：提示信息。</td>
            <td></td>
            <td>弹出提示，3秒后自动关闭。</td>
            <td>
                Layer.tips(message);
                <span class="link" onclick="Layer.tips('请选择！');">测试</span>
            </td>
        </tr>
        <tr>
            <td>alert</td>
            <td>
                message：提示信息；<br />
                callback：确定后回调函数。
            </td>
            <td></td>
            <td>弹出信息提示框。</td>
            <td>
                Layer.alert(message, callback);
                <span class="link" onclick="Layer.alert('请输入！', function () { alert('OK'); });">测试</span>
            </td>
        </tr>
        <tr>
            <td>confirm</td>
            <td>
                message：提示信息；<br />
                callback：确定后回调函数。
            </td>
            <td></td>
            <td>弹出确认提示框。</td>
            <td>
                Layer.confirm(message, callback);
                <span class="link" onclick="Layer.confirm('确定提交？', function () { alert('OK'); });">测试</span>
            </td>
        </tr>
    </table>
</div>
<div class="section">
    <h2>对话框对象</h2>
    <table class="docTable">
        <tr>
            <th style="width:100px;">成员</th>
            <th>描述</th>
        </tr>
        <tr>
            <td>index</td>
            <td>对话框实例的序号。</td>
        </tr>
        <tr>
            <td>layer</td>
            <td>对话框实例的jquery对象。</td>
        </tr>
        <tr>
            <td>close</td>
            <td>对话框关闭方法。</td>
        </tr>
    </table>
</div>